<template>
    <div class="wrapper">
        <div class="div-calendar" >
            <bmcalendar class="calendar" 
                        selectType='single' 
                        ref='calendar' 
                        @finish='finish' 
                        @chooseMonth='chooseMonth'
                        :style="claStyle" 
                        maximumDate="2999-12-31" 
                        minimumDate="2018-01-01"
                        :markDate="markDate"
                        :startDate="today"
                        weekBgColor="#f49428"
                        selectColor="#f49428"
                        >
            </bmcalendar>
        </div>
        <div class="div-card">
            <div @click="showUpkeepList(0)" class="card" style="background-image: linear-gradient(to right ,#F46250,#Fa9468)"> 
                <div style="margin:20">
                    <text class="card-text">超期工单</text>
                    <text class="card-number">{{maintenanceCount.overdueCount}}</text>
                </div>
            </div>
            <div @click="showUpkeepList(1)" class="card" style="background-image: linear-gradient(to right ,#fc9406,#Fdb308)">
                <div style="margin:20">
                    <text class="card-text">计划工单</text>
                    <text class="card-number">{{maintenanceCount.plannedCount}}</text>
                </div>
            </div>
            <div @click="showUpkeepList(2)" class="card" style="background-image: linear-gradient(to right ,#0fd09f,#18ead2)">
                <div style="margin:20">
                    <text class="card-text">完成工单</text>
                    <text class="card-number">{{maintenanceCount.completedCount}}</text>
                </div>
            </div>
        </div>
        <upkeep-list-pop :showList="showList" @closeList="listClose" ref="upkeepPop"></upkeep-list-pop>
    </div>

</template>
<script>
    var modal = weex.requireModule('modal')
    import upkeepListPop from './upkeepListPop'
    export default {
        components:{
          upkeepListPop  
        },
        data () {
            return{
                token:'',
                today:'',
                yearMonth:'',
                maintenanceCount: {
                    overdueCount: 0,
                    completedCount: 0,
                    plannedCount: 0
                },
                showList:false,
                markDate:[],
                claStyle:{
                    height:800,
                    selectColor:'#f49428',
                    weekBgColor:'#f49428',
                    weekColor:'#ffffff',
                }
            }
        },
        methods: {
            prev() {
                this.$refs['calendar'].goPrve()
            },
            next() {
                this.$refs['calendar'].goNext()
            },
            finish(params){
                // this.$notice.toast({
                //     message: params
                // })
                this.$refs.upkeepPop.getMyUpkeepList(params.startDate)
                this.showList = true
            },
            chooseMonth(params){
                // this.$notice.toast({
                //     message: params
                // })
                this.getMaintenanceCount(params.yearMonth)
                this.getAppCalDate(params.yearMonth)
                this.yearMonth = params.yearMonth
            },
            showUpkeepList(status){
                this.$refs.upkeepPop.getPolicyList(status,this.yearMonth)
                this.showList = true
            },
            listClose(){
                this.showList = false
            },
            getMaintenanceCount(number){
                let filter = {}
                if (number) {
                    filter.year = number.substring(0, 4)
                    filter.month = number.substring(5, 7)
                } else {
                    filter.year = this.today.substring(0, 4)
                    filter.month = this.today.substring(5, 7)
                }
                this.$fetch({
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': `Bearer `+ this.token
                    },
                    method: 'POST',    
                    name: 'getMaintenanceCount',
                    data: filter
                }).then(res => {
                    if(res.success){
                        this.maintenanceCount = res.data
                    }else{
                        this.$notice.toast({
                            message: '网络错误'
                        })
                    }
                }, error => {
                    this.$notice.toast({
                        message: '网络错误'
                    })
                })
            },
            
            getAppCalDate(number){
                let filter = {}
                if (number) {
                    filter.date = number.substring(0, 7)
                } else {
                    filter.date = this.today.substring(0, 7)
                }
                this.$fetch({
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': `Bearer `+ this.token
                    },
                    method: 'POST',    
                    name: 'getAppCalDate',
                    data: filter
                }).then(res => {
                    if(res.success){
                        setTimeout(() => {
                            this.markDate = res.data
                        }, 250)
                        
                    }else{
                        this.$notice.toast({
                            message: '网络错误'
                        })
                    }
                }, error => {
                    this.$notice.toast({
                        message: '网络错误'
                    })
                })
            },
        },
        created(){
            this.$notice.loading.show()
            //获取token
            this.token = this.$storage.getSync('token')
            if(!this.token){
                this.$router.setHomePage('/pages/login.js')
            }
            this.today = new Date().toJSON().toString().substring(0,10)
            this.yearMonth = this.today.substring(0,7)
            this.getMaintenanceCount();
            this.getAppCalDate();
            this.$notice.loading.hide()   
        },
       
    }
</script>

<style scoped>
    .calendar {
        background-color: #f2f3f4;
    }
    .div-card{
        flex-direction: row;
        margin:20 0 20 0
    }
    .card{
        flex: 1;
        height: 120;
        margin: 0 20 0 20;
        border-radius: 20px;
    }
    .card-text{
        font-size: 33px;
        color: #ffffff
    }
    .card-number{
        font-size: 40px;
        color: #ffffff
    }
</style>
